<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  </head>
  
  <body>
    <div class="main">
        <ul>
            <li id="a"></li>
            <li id="b"></li>
            <li id="c"></li>
            <li id="d"></li>
            <li id="e"></li>
        </ul>
    </div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        var myFunc = {
            init: function(settings) {
                myFunc.config = {
                    items: $("#main li"),
                    container: $("<div class='container'></div>")
                };
                
                //允许覆盖默认配置
                $.extend(myFunc.config, settings);
                myFunc.setup();
            },
            
            setup: function() {
                myFunc.config.items
                    .each(myFunc.createContainer)
                    .click(myFunc.showItem);
            },
            
            createContainer: function() {
                var item = $(this);
                var container = myFunc.config.container
                    .clone()
                    .appendTo(item);
                //使用data属性存储指向div的地址
                item.data("container", container);
            },
            
            showItem: function() {
                myFunc.currentItem = $(this);
                myFunc.getContent(myFunc.showContent);
            },
            
            getContent: function(callback) {
                myFunc.currentItem.data("container").html("Object Literal");
                //传递的回调函数是在需要的时候才调用的并不一定会在函数执行完成之后才能调用
                callback();
            },
            
            showContent: function() {
                myFunc.currentItem.data("container").show();
                myFunc.hideContent();
            },
            
            hideContent: function() {
                myFunc.currentItem.siblings().each(function() {
                    $(this).data("container").hide();
                });
            }
        };
        var myModule = (function() {
            var privateThing = "secret";
            var publicThing = "not secret";
            
            var changePrivateThing = function() {
                priavteThing = "super secret";
            }
            
            var sayPrivateThing = function() {
                console.log(privateThing);
                changePrivateThing();
            };
            
            return {
                publicThing: publicThing,
                sayPrivateThing: sayPrivateThing
            };
        })();
        
        var revisedFunc = (function() {
            var items = $(".main li");
            var container = $("<div class='container'></div>");
            var currentItem = null;
            
            var createContainer = function() {
                var item = $(this);
                var _container = container.clone().appendTo(item);
                item.data("container", _container);
            }
            
            var showItem = function() {
                currentItem = $(this);
                getContent(showContent);
            };
            
            var showItemByIndex = function(idx) {
                //get(-1)取得最后一个元素    
                //get()会返回所有的参数
                $.proxy(showItem, items.get(idx));
            };
            
            var getContent = function(callback) {
                currentItem.data("container").html("module");
                callback();
            };
            
            var showContent = function() {
                currentItem.data("container").show();
                hideContent();
            };
            
            var hideContent = function() {
                currentItem.siblings().each(function() {
                    $(this).data("container").hide();
                });
            };
            
            items.each(createContainer).click(showItem);
            
            return {
                showItemByIndex: showItemByIndex
            };
        })();
        
        $(function() {
            //Object Literal
            //除去匿名函数
            //集中配置选项
            //简单复用重构
            var myFeature = {
                myProperty: "hello",
                myMethod: function() {
                    console.log(myFeature.myProperty);
                },
                init: function(settings) {
                    myFeature.settings = settings;
                },
                readSettings: function() {
                    console.log(myFeature.settings);
                }
            };
            
            console.log(myFeature.myProperty === "hello");
            myFeature.myMethod();
            myFeature.init({
                foo: "bar"
            });
            myFeature.readSettings();
            
            //传统的jQuery代码
            $("#main li").append("<div>").click(function() {
                var item = $(this);
                var div = items.find("div");
                div.show().html("显示").fadeOut().fadeIn();
                items.siblings().find("div").hide();
            });
            
            myFunc.init();
            console.log(myModule.publicThing);
            myModule.sayPrivateThing();
            revisedFunc.showItemByIndex(0);
        });
    </script>
  </body>
</html>